<template>
  <view class="assessResult">
    <view class="people-info">
      <view class="people-info-left">
        <image class="assessResult-title-img" :src="require('../images/report/people-1.png')" />
        <view class="people-info-name">{{ userInfo.name }}</view>
        <view class="people-info-age">
          <span v-if="userInfo.sex">{{ userInfo.sex }}</span>
          <span v-if="userInfo.sex && userInfo.age">/</span>
          <span v-if="userInfo.age">{{ userInfo.age }}岁</span>
        </view>
      </view>
      <view class="people-info-right"> 报告于{{ userInfo.reportDate }}生成 </view>
    </view>

    <view class="css-box">
      <view class="tab-box">
        <view
          v-for="(item, index) in tabs"
          :key="item"
          :class="['tabs', current === index ? 'active-tabs' : '']"
          @click="clickTab(index)"
        >
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 健康资产分析 -->
    <view id="health-risk" class="tab-views">
      <!-- 基本特征 -->
      <view v-if="shapeActive" class="basic-features">
        <view class="assessResult-title">
          <image class="assessResult-title-img" :src="require('../images/report/people-2.png')" />基本特征
        </view>

        <view v-if="userInfo.sex === '男'" class="body-type male">
          <view v-for="(item, index) in shapeMale" :key="index" class="body-tip">
            <image
              class="basic-features-img"
              mode="heightFix"
              :src="item.id === shapeActive ? item.imgIng : item.img"
            />

            <view v-if="item.id === shapeActive" class="tip-txt" :style="{ '--color': item.color }">{{
              item.name
            }}</view>
          </view>
        </view>
        <view v-if="userInfo.sex === '女'" class="body-type male">
          <view v-for="(item, index) in shapeFemale" :key="index" class="body-tip">
            <image
              class="basic-features-img"
              mode="heightFix"
              :src="item.id === shapeActive ? item.imgIng : item.img"
            />

            <view v-if="item.id === shapeActive" class="tip-txt" :style="{ '--color': item.color }">{{
              item.name
            }}</view>
          </view>
        </view>
      </view>

      <!-- 健康资产 -->
      <view v-if="healthAnalysis.high.length || healthAnalysis.low.length" class="healthyAssets">
        <view class="assessResult-title">
          <image class="assessResult-title-img" :src="require('../images/report/risk-5.png')" />健康资产
        </view>
        <view v-if="healthAnalysis.low.length" class="healthyAssets-good">
          <view class="left">优良资产</view>
          <view class="right">
            <view v-for="item in healthAnalysis.low" :key="item.metric" class="good-mark">
              {{ item.metric }}<text v-if="item.value">: {{ item.value }}</text>
            </view>
          </view>
        </view>
        <view v-if="healthAnalysis.high.length" class="healthyAssets-bad">
          <view class="left">不良资产</view>
          <view class="right">
            <view v-for="item in healthAnalysis.high" :key="item.metric" class="bad-mark">
              {{ item.metric }}<text v-if="item.value">: {{ item.value }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 大病风险 -->
    <view id="manual" class="manual tab-views">
      <!-- 慢病风险等级 -->
      <view v-if="riskLevel.level" class="risk">
        <view class="assessResult-title">
          <image class="assessResult-title-img" :src="require('../images/report/risk-1.png')" />慢病风险等级
        </view>

        <view class="risk-grid" :style="{ paddingTop: chronic.length > 0 ? '140rpx' : '40rpx' }">
          <view :class="['risk-solid', riskLevel.level === '低风险' ? 'current' : '']">
            <!-- <view class="risk-solid-tip">高于{{ riskLevel.percent }}%的同类人群</view> -->
            <view v-if="chronic.length > 0" class="risk-solid-tip">需重点管理的慢病为:{{ chronic.join(',') }}</view>
            <image class="risk-solid-img" :src="require('../images/report/risk-2.png')" />
            <view style="background: #07c160" class="solid"></view>
            <text class="txt">低风险</text>
          </view>
          <view :class="['risk-solid', riskLevel.level === '中风险' ? 'current' : '']">
            <!-- <view class="risk-solid-tip">高于{{ riskLevel.percent }}%的同类人群</view> -->
            <view v-if="chronic.length > 0" class="risk-solid-tip">需重点管理的慢病为:{{ chronic.join(',') }}</view>
            <image class="risk-solid-img" :src="require('../images/report/risk-3.png')" />
            <view style="background: #ffbe00" class="solid"></view>
            <text class="txt">中风险</text>
          </view>
          <view :class="['risk-solid', riskLevel.level === '高风险' ? 'current' : '']">
            <!-- <view class="risk-solid-tip last">高于{{ riskLevel.percent }}%的同类人群</view> -->
            <view v-if="chronic.length > 0" class="risk-solid-tip last"
              >需重点管理的慢病为:{{ chronic.join(',') }}</view
            >
            <image class="risk-solid-img" :src="require('../images/report/risk-4.png')" />
            <view style="background: #f34e1c" class="solid"></view>
            <text class="txt" style="color: red">高风险</text>
          </view>
        </view>
      </view>
      <!-- <div class="manager">
        <div class="m-title">需重点管理的慢病为</div>
        <div class="m-des">
          <div v-for="item in chronic" :key="item.pgm" class="m-d-item">
            {{ item.pgm }}
          </div>
        </div>
      </div> -->

      <!-- 短期风险 -->
      <view v-if="shortRisk.length" class="shortRisk">
        <view class="list-title">短期风险</view>
        <view v-for="item in shortRisk" :key="item.risk" class="row">
          <view class="sickInfo">
            <view :class="['imgs', item.className]"> </view>
            <view class="title">
              <text class="risk-name">{{ item.riskName }}</text>
            </view>
            <view class="desc">未来1年内患病风险值: {{ (item.valueNum * 100).toFixed(3) }}%</view>
            <view class="desc">高于{{ ((item.rnk || 0) * 100).toFixed(2) }}%的同类人群。</view>
          </view>
        </view>
      </view>

      <!-- 长期风险 -->
      <view v-if="longRisk.length" class="shortRisk">
        <view class="list-title">长期风险</view>
        <view v-for="item in longRisk" :key="item.risk" class="row">
          <view class="sickInfo">
            <view :class="['imgs', item.className]"> </view>
            <view class="title">
              <text class="risk-name">{{ item.riskName }}</text>
            </view>
            <view class="desc">未来5年内患病风险值: {{ (item.valueNum * 100).toFixed(3) }}%</view>
            <view class="desc">高于{{ ((item.rnk || 0) * 100).toFixed(2) }}%的同类人群。</view>
          </view>
        </view>
      </view>

      <!-- 癌症风险 -->
      <view v-if="cancerRisk.length" class="shortRisk">
        <view class="list-title">癌症风险</view>
        <view v-for="item in cancerRisk" :key="item.risk" class="row">
          <view class="sickInfo">
            <view :class="['imgs', item.className]"> </view>
            <view class="title">
              <text class="risk-name">{{ item.name }}</text>
              <text v-if="item.riskLevel" class="h">高风险</text>
              <text v-else class="l">低风险</text>
            </view>
            <view class="desc">未来5年内患病风险值: {{ (item.valueNum * 100).toFixed(3) }}%</view>
            <!-- <view class="desc">高于{{ ((item.rnk || 0) * 100).toFixed(2) }}%的同类人群。</view> -->
          </view>
          <view class="sickTips">
            <img :src="require('../images/warning.png')" />{{ item.name }}全人群平均患病风险值为{{
              (item.avg * 100).toFixed(2)
            }}%
          </view>
        </view>
        <view class="tips textLeft"> 标准数据来源于国家癌症中心报告。 </view>
      </view>

      <!-- 住院风险 -->
      <view v-if="hospitalizationRisk.value" class="shortRisk hospitalization">
        <view class="list-title">住院风险</view>
        <view class="hospitalization-title">{{ hospitalizationRisk.riskName }}</view>
        <view class="hospitalization-des">
          {{ hospitalizationRisk.riskName }}的风险值: {{ (hospitalizationRisk.valueNum * 100).toFixed(3) }}%
        </view>
        <view class="hospitalization-des">
          高于{{ ((hospitalizationRisk.rnk || 0) * 100).toFixed(2) }}%的同类人群
        </view>
        <view class="hospitalization-des">住院支出金额预计: {{ hospitalizationRisk.cost }}元</view>
        <view class="sickTips">
          <img :src="require('../images/warning.png')" />
          {{ hospitalizationRisk.riskName }}的人均风险值为{{ (hospitalizationRisk.avg * 100).toFixed(2) }}%
        </view>
      </view>
    </view>

    <!-- 指导建议 -->
    <view id="guidance" class="guidance tab-views">
      <!-- 健康检查建议 -->
      <view class="suggestion">
        <view class="assessResult-title">
          <image class="assessResult-title-img" :src="require('../images/report/risk-1.png')" />体检建议
        </view>
        <view v-if="Object.keys(examineAdvice).length" class="suggestion-box">
          <view v-for="(item, key) in examineAdvice" :key="key" class="suggestion-item">
            <template v-if="item.length">
              <view class="suggestion-title"> {{ key }}</view>
              <view>
                <view v-for="(subI, index) in item" :key="index" class="suggestion-mark">{{ subI }}</view>
              </view>
            </template>
          </view>
        </view>
        <view v-else class="suggestion-box"> 暂无特殊或重点检查建议。 </view>
      </view>

      <!-- 药物缺失提醒 -->
      <view v-if="smngtPrograms.length" class="shortRisk">
        <view class="list-title">药物缺失提醒</view>
        <view v-for="(key, index) in smngtPrograms" :key="index" class="suggestion-drugs">
          <!-- <view class="suggestion-drugs-name">主食应粗细搭配</view> -->
          <view class="suggestion-drugs-cen">{{ key }}</view>
        </view>
      </view>

      <!-- 用药建议 -->
      <view v-for="item in healthGuides" :key="item.typeName" class="shortRisk">
        <view class="list-title">{{ item.typeName }}</view>
        <view v-for="(key, index) in item.datas" :key="index" class="suggestion-drugs">
          <!-- <view class="suggestion-drugs-name">主食应粗细搭配</view> -->
          <view class="suggestion-drugs-cen">{{ key }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/* eslint-disable no-invalid-this */
import { getAssessmentReportsInfo } from '@/api/assessQuestion';
import { throttle } from '@/utils/optimize';

const shapeMale = [
  {
    id: 1,
    name: '偏瘦型',
    img: require('../images/report/m-body-1.png'),
    imgIng: require('../images/report/m-body-1-a.png'),
    color: '#72A9E2'
  },
  {
    id: 2,
    name: '正常型',
    img: require('../images/report/m-body-2.png'),
    imgIng: require('../images/report/m-body-2-a.png'),
    color: '#07C160'
  },
  {
    id: 3,
    name: '偏胖型',
    img: require('../images/report/m-body-3.png'),
    imgIng: require('../images/report/m-body-3-a.png'),
    color: '#FFBE00'
  },
  {
    id: 4,
    name: '肥胖型',
    img: require('../images/report/m-body-4.png'),
    imgIng: require('../images/report/m-body-4-a.png'),
    color: '#F87676'
  }
];
const shapeFemale = [
  {
    id: 1,
    name: '偏瘦型',
    img: require('../images/report/f-body-1.png'),
    imgIng: require('../images/report/f-body-1-a.png'),
    color: '#72A9E2'
  },
  {
    id: 2,
    name: '正常型',
    img: require('../images/report/f-body-2.png'),
    imgIng: require('../images/report/f-body-2-a.png'),
    color: '#07C160'
  },
  {
    id: 3,
    name: '偏胖型',
    img: require('../images/report/f-body-3.png'),
    imgIng: require('../images/report/f-body-3-a.png'),
    color: '#FFBE00'
  },
  {
    id: 4,
    name: '肥胖型',
    img: require('../images/report/f-body-4.png'),
    imgIng: require('../images/report/f-body-4-a.png'),
    color: '#F87676'
  }
];

export default {
  data() {
    return {
      patientId: '',
      reportId: '', // 报告id
      userInfo: {
        name: '',
        age: '',
        sex: '',
        reportDate: ''
      }, // 用户基本信息
      healthAnalysis: {
        bmi: '',
        high: [], // 优良资产
        low: [] // 不良资产
      }, // 健康资产分析
      riskLevel: {}, // 慢病综合风险
      shortRisk: [], // 短期风险
      longRisk: [], // 长期风险
      cancerRisk: [], // 癌症风险
      hospitalizationRisk: {}, // 住院风险
      examineAdvice: [], // 健康建议
      healthGuides: {}, // 指导建议
      // 体型 shapeActive是赋值
      shapeMale: Object.freeze(shapeMale),
      shapeFemale: Object.freeze(shapeFemale),
      riskDesc: '', // 风险值
      current: 0,
      tabs: ['健康资产分析', '大病风险', '指导建议'],
      chronic: [], // 慢性疾病管理，
      smngtPrograms: []
    };
  },

  computed: {
    // 计算体型
    shapeActive() {
      if (!this.healthAnalysis.bmi) {
        return false;
      }
      this.healthAnalysis.bmi = Number(this.healthAnalysis.bmi);
      if (this.healthAnalysis.bmi <= 18.4) {
        return 1;
      } else if (18.5 <= this.healthAnalysis.bmi && this.healthAnalysis.bmi <= 23.9) {
        return 2;
      } else if (24 <= this.healthAnalysis.bmi && this.healthAnalysis.bmi <= 27.9) {
        return 3;
      } else if (this.healthAnalysis.bmi >= 28) {
        return 4;
      }
      return false;
    }
  },

  onLoad: function (option) {
    if (option && option.patientId) {
      this.patientId = option.patientId;
      this.reportId = option.id;
    } else {
      this.patientId = '09ad269640814235ab5fc43c4ab9e119';
      this.reportId = '60edfed27ef2de081b0eebee';
      // patientId=29dc1b31e8f04eee87cedf8bb8b9817e&id=60b0469968c137567cf19661
      // this.patientId = 'cd563246cbf04b019777c150545ecc5e';
      // this.reportId = '60b0469968c137567cf19661';
    }
    this.init();
  },

  onPageScroll: throttle(function (e) {
    this.tabViewHeight();
  }, 60),

  methods: {
    // eslint-disable-next-line complexity
    async init() {
      const { data: info } = await getAssessmentReportsInfo(this.reportId);
      // 用户信息
      if (!info.age) {
        info.age = undefined;
      }

      if (info.sex === 1) {
        info.sex = '男';
      } else if (info.sex === 0) {
        info.sex = '女';
      }

      Object.keys(this.userInfo).forEach((key) => {
        this.userInfo[key] = info[key];
      });

      // 健康资产分析
      if (info.healthAnalysis) {
        this.healthAnalysis.bmi = info.healthAnalysis.bmi || false;
        // 健康资产
        if (info.healthAnalysis.chronicDiseaseMetrics && info.healthAnalysis.chronicDiseaseMetrics.length) {
          let high = [];
          let low = [];
          info.healthAnalysis.chronicDiseaseMetrics.forEach((item) => {
            if (item.level === 'high') {
              high.push(item);
            } else if (item.level === 'low') {
              low.push(item);
            }
          });
          this.healthAnalysis.high = high;
          this.healthAnalysis.low = low;
        }
      }

      // 慢病风向
      if (info.chronicDiseaseRisk) {
        // 慢病综合风险
        if (info.chronicDiseaseRisk.riskLevel) {
          const riskLevel = info.chronicDiseaseRisk.riskLevel;
          riskLevel.percent = ((1 - riskLevel.percent || 0) * 100).toFixed(3);
          this.riskLevel = riskLevel;
        }

        // 短期风险
        if (info.chronicDiseaseRisk.shortRisk.length) {
          const diseases = {
            脑卒中: 'bg-naozuzhong',
            糖尿病肾病: 'bg-tangniaobingshenbing',
            心脑血管: 'bg-guanxinbing',
            冠心病: 'bg-guanxinbing',
            肺癌: 'bg-feiai',
            肝癌: 'bg-ganai',
            胃癌: 'bg-weiai',
            食管癌: 'bg-shiguanai',
            结肠癌: 'bg-jiechangai',
            直肠癌: 'bg-zhichangai',
            乳腺癌: 'bg-ruxianai',
            前列腺癌: 'bg-qianliexianai',
            宫颈癌: 'bg-gongjingai'
          };
          // 增加疾病图片
          info.chronicDiseaseRisk.shortRisk.forEach((item) => {
            if (item.riskName) {
              for (const key in diseases) {
                if (Object.hasOwnProperty.call(diseases, key)) {
                  if (item.riskName.indexOf(key) > -1) {
                    item.className = diseases[key];
                    return;
                  } else {
                    item.className = 'noImg';
                  }
                }
              }
            } else {
              item.className = 'noImg';
            }
          });
          const temp = info.chronicDiseaseRisk.shortRisk;
          if (this.userInfo.sex === '男') {
            let i = temp.findIndex((item) => item.className === 'bg-gongjingai');
            if (i !== -1) {
              temp.splice(i, 1);
            }
          } else if (this.userInfo.sex === '女') {
            let i = temp.findIndex((item) => item.className === 'bg-qianliexianai');
            if (i !== -1) {
              temp.splice(i, 1);
            }
          }

          this.shortRisk = temp;
        }

        // 长期风险
        if (info.chronicDiseaseRisk.longRisk.length) {
          const diseases = {
            脑卒中: 'bg-naozuzhong',
            糖尿病肾病: 'bg-tangniaobingshenbing',
            心脑血管: 'bg-guanxinbing',
            冠心病: 'bg-guanxinbing',
            肺癌: 'bg-feiai',
            肝癌: 'bg-ganai',
            胃癌: 'bg-weiai',
            食管癌: 'bg-shiguanai',
            结肠癌: 'bg-jiechangai',
            直肠癌: 'bg-zhichangai',
            乳腺癌: 'bg-ruxianai',
            前列腺癌: 'bg-qianliexianai',
            宫颈癌: 'bg-gongjingai'
          };
          // 增加疾病图片
          info.chronicDiseaseRisk.longRisk.forEach((item) => {
            if (item.riskName) {
              for (const key in diseases) {
                if (Object.hasOwnProperty.call(diseases, key)) {
                  if (item.riskName.indexOf(key) > -1) {
                    item.className = diseases[key];
                    return;
                  } else {
                    item.className = 'noImg';
                  }
                }
              }
            } else {
              item.className = 'noImg';
            }
          });
          const temp = info.chronicDiseaseRisk.longRisk;
          if (this.userInfo.sex === '男') {
            let i = temp.findIndex((item) => item.className === 'bg-gongjingai');
            if (i !== -1) {
              temp.splice(i, 1);
            }
          } else if (this.userInfo.sex === '女') {
            let i = temp.findIndex((item) => item.className === 'bg-qianliexianai');
            if (i !== -1) {
              temp.splice(i, 1);
            }
          }
          this.longRisk = temp;
        }

        // 癌症风险
        if (info.chronicDiseaseRisk.cancerRisk.length) {
          const diseases = {
            C15: { name: '食管癌', className: 'bg-shiguanai' },
            C16: { name: '胃癌', className: 'bg-weiai' },
            C18: { name: '结肠癌', className: 'bg-jiechangai' },
            C20: { name: '直肠癌', className: 'bg-zhichangai' },
            'C22.9': { name: '肝癌', className: 'bg-ganai' },
            'C34.9': { name: '肺癌', className: 'bg-feiai' },
            C50: { name: '乳腺癌', className: 'bg-ruxianai' },
            C61: { name: '前列腺癌', className: 'bg-qianliexianai' },
            C53: { name: '宫颈癌', className: 'bg-gongjingai' }
          };
          // 增加疾病图片
          info.chronicDiseaseRisk.cancerRisk.forEach((item, index) => {
            if (item.risk) {
              for (const key in diseases) {
                if (Object.hasOwnProperty.call(diseases, key)) {
                  if (item.risk === key) {
                    Object.assign(item, diseases[key]);
                    return;
                  }
                }
              }
            } else {
              item.className = 'noImg';
              item.name = item.riskName;
            }
          });
          const temp = info.chronicDiseaseRisk.cancerRisk;
          if (this.userInfo.sex === '男') {
            let i = temp.findIndex((item) => item.risk === 'C53');
            if (i !== -1) {
              temp.splice(i, 1);
            }
          } else if (this.userInfo.sex === '女') {
            let i = temp.findIndex((item) => item.risk === 'C61');
            if (i !== -1) {
              temp.splice(i, 1);
            }
          }

          this.cancerRisk = temp;
        }

        // 住院风险
        if (info.chronicDiseaseRisk.hospitalizationRisk) {
          this.hospitalizationRisk = info.chronicDiseaseRisk.hospitalizationRisk;
        }
      }
      // 慢性疾病管理
      if (Array.isArray(info.mngtPrograms.chronic)) {
        this.chronic = info.mngtPrograms.chronic.map((item) => {
          return item.pgm;
        });
      }

      // 药物缺失提醒
      this.smngtPrograms = info.smngtPrograms;
      // 指导建议
      if (info.healthGuides && info.healthGuides.length) {
        let healthGuides = [];
        // note: 根据后端定义所代表的基本排序:排序依次为：血压监测管理、血糖监测管理、血脂监测管理、降压药管理、降糖药管理、降脂药管理、大病预防、戒烟管理、限酒管理、均衡饮食管理、饮水管理、减重管理、增重管理、睡眠管理、规律运动管理。
        const sort = [
          // 'C34',
          // 'C16',
          // 'C22',
          // 'C18',
          // 'C15',
          // 'C50',
          // 'C53',
          // 'C61',
          'I',
          'J',
          'K',
          'L',
          'M',
          'N', // 降脂药管理
          'cancerRisk', // 大病预防
          'B',
          'C',
          'A',
          'H',
          'E',
          'F',
          'G',
          'D'
        ];
        for (const key of info.healthGuides) {
          // 排除健康建议
          if (key.type !== 'examineAdvice' && key.type !== undefined) {
            let i = sort.indexOf(key.type);
            if (i < 0) continue;

            let temp = {
              sort: i,
              typeName: key.typeName,
              datas: healthGuides[key.type] ? healthGuides[key.type].datas.concat(key.datas) : key.datas
            };
            healthGuides[key.type] = temp;
          }
          // 健康检查知道建议
          if (key.frequencies) {
            let examineAdvice = {
              每周一次: [],
              每月一次: [],
              每半年一次: [],
              每年一次: [],
              每两年一次: [],
              每五年一次: []
            };
            key.frequencies.forEach((item, index) => {
              if (examineAdvice[item]) {
                examineAdvice[item].push(key.datas[index]);
              } else {
                examineAdvice[item] = [key.datas[index]];
              }
            });
            console.log('examineAdvice:', examineAdvice);
            this.examineAdvice = examineAdvice;
          }
        }

        // obj转arr(防止同一个建议返回两次)
        const healthGuidesArr = [];
        Object.keys(healthGuides).forEach((item) => {
          healthGuidesArr.push(healthGuides[item]);
        });

        const sortHealth = healthGuidesArr.sort((a, b) => a.sort - b.sort);
        this.healthGuides = sortHealth;
      }
    },

    // 点击tab
    clickTab(i) {
      // [健康资产分析, 大病风险, 指导建议] id选择器
      const view_class = ['#health-risk', '#manual', '#guidance'];
      const query = uni.createSelectorQuery();
      this.current = i;
      query.select(view_class[i]).boundingClientRect();
      query.selectViewport().scrollOffset();
      query.exec((res) => {
        uni.pageScrollTo({
          scrollTop: res[0].top + res[1].scrollTop - 58,
          duration: 60
        });
      });
    },

    // 计算tabView高度
    tabViewHeight() {
      const query = uni.createSelectorQuery();
      query
        .selectAll('.tab-views')
        .boundingClientRect()
        .exec((res) => {
          if (res) {
            const rect = res[0];
            for (let i = 2; i >= 0; i--) {
              if (rect[i].top <= 58) {
                this.current = i;
                return;
              } else {
                this.current = 0;
              }
            }
          }
        });
    }
  }
};
</script>

<style lang="scss">
.assessResult {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &-title-img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 18rpx;
  }
  &-title {
    font-size: 38rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.9);
    padding: 24rpx 0;
    display: flex;
    align-items: center;
  }
  .people-info {
    margin: 24rpx;
    padding: 24rpx;
    border-radius: 16rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-name {
      font-size: 38rpx;
      color: rgba(0, 0, 0, 0.9);
      // margin-left: 12rpx;
      margin-right: 24rpx;
      font-weight: 500;
    }
    &-age {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
    }
    &-left {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &-right {
      color: rgba(0, 0, 0, 0.55);
      font-size: 24rpx;
    }
  }
  .css-box {
    border-radius: 16rpx;
    background: #ffffff;
    font-weight: 400;
    // position: relative;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    left: 0;
    z-index: 9;
  }
  .css-box::after {
    content: ' ';
    display: block;
    position: absolute;
    top: 90rpx;
    z-index: -1;
    width: 100%;
    height: 80rpx;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, white 70%);
  }
  .tab-box {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    justify-content: space-between;
    margin: 0 48rpx;
    border-bottom: 1px solid #e8e8e8;
    // margin: 24rpx;
    // border-radius: 16rpx;
    // background-color: #fff;
    // position: sticky;
    // position: -webkit-sticky;
    // top: 0px;
    // left: 0;
    // z-index: 9;
    // box-shadow: 0 4px 10px 0px #ffffff;
    // margin-bottom: 0;
    .tabs {
      padding: 24rpx 0 16rpx;
      position: relative;
      top: 0;
      width: 200rpx;
      text-align: center;
    }
    .active-tabs {
      color: #f34e1c;
      font-weight: 500;
    }
    .active-tabs::after {
      content: ' ';
      width: 100%;
      height: 1px;
      background: #f34e1c;
      position: absolute;
      bottom: -1px;
      left: 0;
      margin: auto;
      right: 0;
    }
  }

  .basic-features {
    margin: 24rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;
    height: 480rpx;
    &-img {
      width: 50rpx;
      height: 188rpx;
    }
  }
  .body-type {
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;
  }
  .body-tip {
    position: relative;
    width: 90rpx;
    text-align: center;
    .tip-txt {
      width: 184rpx;
      background: var(--color);
      border-radius: 12rpx;
      font-size: 46rpx;
      color: rgba(255, 255, 255, 0.9);
      position: absolute;
      left: -48rpx;
      bottom: -100rpx;
      text-align: center;
    }
    .tip-txt:before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 80rpx;
      width: 0;
      height: 0;
      border-width: 12rpx;
      border-style: solid;
      border-color: transparent;
      margin-bottom: -1px;
      border-bottom-width: 16rpx;
      border-bottom-color: currentColor;
      color: var(--color);
    }
  }
  .healthyAssets {
    margin: 24rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;
    padding-top: 0;
    &-good,
    &-bad {
      display: flex;
      margin-bottom: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
    }
    &-good {
      background: rgba(16, 174, 255, 0.1);
    }
    &-bad {
      background: rgba(241, 69, 63, 0.1);
    }
    &-good .left,
    &-bad .left {
      width: 176rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      border-radius: 16rpx;
    }
    &-good .right,
    &-bad .right {
      flex: 1;
      padding: 24rpx 16rpx;
      box-sizing: border-box;
    }
    &-good .left {
      background: #10aeff;
      background-image: url('../images/report/risk-6.png');
      background-repeat: no-repeat;
      background-origin: border-box;
      background-size: contain;
      background-position: bottom;
    }
    &-bad .left {
      background: #f1453f;
      background-image: url('../images/report/risk-7.png');
      background-repeat: no-repeat;
      background-origin: border-box;
      background-size: contain;
      background-position: bottom;
    }
    .good-mark,
    .bad-mark {
      padding: 4rpx 18rpx;
      border-radius: 28rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      float: left;
      margin: 8rpx 10rpx;
    }
    .good-mark {
      background: rgba(16, 174, 255, 0.1);
    }
    .bad-mark {
      background: rgba(241, 69, 63, 0.1);
    }
  }

  .risk {
    margin: 24rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;
    padding-bottom: 50rpx;
    &-grid {
      display: flex;
      padding-top: 40rpx;
      .current .risk-solid-tip {
        visibility: initial !important;
      }
      .current .risk-solid-img {
        visibility: initial !important;
      }
      .current .solid {
        opacity: 1 !important;
      }
      .current .txt {
        opacity: 1 !important;
      }
    }

    &-solid {
      width: 33.33%;
      text-align: center;
      color: rgba(0, 0, 0, 1);
      position: relative;
      &-tip {
        font-size: 32rpx;
        background: #e8e8e8;
        color: rgba(0, 0, 0, 0.9);
        position: absolute;
        width: 380rpx;
        text-align: center;
        padding: 8rpx;
        border-radius: 8rpx;
        top: -140rpx;
        visibility: hidden;
      }
      &-tip::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 94rpx;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
        border-top-width: 20rpx;
        border-top-color: currentColor;
        color: #e8e8e8;
        border-right-width: 14rpx;
        border-bottom-width: 14rpx;
        border-left-width: 14rpx;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
      }
      .last {
        left: -60px;
      }
      .last::before {
        left: 212rpx;
      }
      .txt {
        opacity: 0.55;
      }
    }
    .solid {
      width: 100%;
      height: 20rpx;
      margin-bottom: 20rpx;
      margin-top: 10rpx;
      opacity: 0.3;
    }
    .risk-solid-img {
      width: 72rpx;
      height: 72rpx;
      visibility: hidden;
    }
  }
  .manager {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin: 24rpx;
    .m-title {
      font-size: 32rpx;
      padding: 10rpx;
      border-bottom: 2rpx solid #eee;
      padding-bottom: 24rpx;
      font-weight: 500;
    }
    .m-des {
      margin-top: 10rpx;
      .m-d-item {
        padding: 5rpx;
        margin: 10rpx;
        background: #f87676;
        display: inline-block;
        color: white;
        border-radius: 12rpx;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }

  .shortRisk {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin: 24rpx;
    .list-title {
      font-size: 32rpx;
      padding: 10rpx;
      border-bottom: 2rpx solid #eee;
      padding-bottom: 24rpx;
      font-weight: 500;
    }
    .row {
      border-bottom: 2rpx solid #eee;
      margin: 24rpx 0;
      padding: 0 24rpx;
      .sickInfo {
        position: relative;
        padding-left: 180rpx;
        min-height: 190rpx;
        color: #333;
        .imgs {
          position: absolute;
          left: 0;
          top: 0;
          width: 120rpx;
          height: 120rpx;
          padding: 20rpx;
          background-color: #fee9e9;
          border-radius: 16rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          font-size: 38rpx;
          margin-bottom: 10rpx;
          color: rgba(0, 0, 0, 0.9);
          font-weight: 500;

          display: flex;
          align-items: center;
          .risk-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 370rpx;
          }
          .h {
            background: rgba(243, 78, 28, 1);
            font-size: 24rpx;
            margin-left: 10rpx;
            color: #fff;
            border-radius: 4rpx;
            padding: 0 10rpx;
          }
          .m {
            font-size: 24rpx;
            margin-left: 10rpx;
            color: #fff;
            border-radius: 4rpx;
            padding: 0 10rpx;
            background: #ffbe00;
          }
          .l {
            font-size: 24rpx;
            margin-left: 10rpx;
            color: #fff;
            border-radius: 4rpx;
            padding: 0 10rpx;
            background: #34c759;
          }
        }
        .desc {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.7);
        }
      }
    }
    .sickTips {
      color: rgba(0, 0, 0, 0.3);
      font-size: 28rpx;
      position: relative;
      padding-left: 40rpx;
      margin-bottom: 24rpx;
      img {
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        left: 0;
        top: 8rpx;
      }
    }
    .row:last-child {
      padding-bottom: none;
      border: none;
      margin-bottom: 0;
    }
    .tips {
      color: rgba(0, 0, 0, 0.55);
      font-size: 26rpx;
      text-align: left;
      margin: 0;
      padding: 0;
    }
  }

  .tab-views {
    overflow: hidden;
  }

  .bg-feiai {
    background: url('../images/report/feiai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }
  .bg-ganai {
    background: url('../images/report/ganai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }
  .bg-gongjingai {
    background: url('../images/report/gongjingai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-guanxinbing {
    background: url('../images/report/guanxinbing.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-jiechangai {
    background: url('../images/report/jiechangai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-naozuzhong {
    background: url('../images/report/naozuzhong.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-qianliexianai {
    background: url('../images/report/qianliexianai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-ruxianai {
    background: url('../images/report/ruxianai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-shiguanai {
    background: url('../images/report/shiguanai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-weiai {
    background: url('../images/report/weiai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-tangniaobingshenbing {
    background: url('../images/report/tangniaobingshenbing.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .bg-zhichangai {
    background: url('../images/report/zhichangai.png') no-repeat;
    background-size: 100%;
    background-origin: content-box;
  }

  .hospitalization {
    &-title {
      font-size: 38rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      margin: 38rpx 0 24rpx;
    }
    &-des {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.7);
      margin-bottom: 8rpx;
    }
    .sickTips {
      margin: 24rpx 0;
    }
  }

  .suggestion {
    margin: 24rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;
    padding-bottom: 50rpx;

    &-box {
      border-radius: 16rpx;
      background: rgba(241, 69, 63, 0.1);
      padding: 20rpx 16rpx;
      .suggestion-item {
        margin: 10px 0px;
        .suggestion-title {
        }
      }
    }
    &-mark {
      color: rgba(0, 0, 0, 0.9);
      font-size: 32rpx;
      border-radius: 28rpx;
      margin: 16rpx;
      background: rgba(241, 69, 63, 0.1);
      padding: 8rpx 20rpx;
      display: inline-block;
    }
    &-box::after {
      clear: both;
      content: '.';
      display: block;
      width: 0;
      height: 0;
      visibility: hidden;
    }
    &-drugs {
      margin: 42rpx 0 16rpx;
      &-name {
        font-size: 32rpx;
        color: #f34e1c;
        font-weight: 500;
        margin: 16rpx 0;
      }
      &-cen {
        color: rgba(0, 0, 0, 0.55);
        font-size: 32rpx;
      }
    }
  }

  .tips {
    background-color: #fff;
    // padding: 24rpx;
    margin: 24rpx;
    margin-top: 0;
    padding-top: 24rpx;
    color: rgba(0, 0, 0, 0.55);
    font-size: 32rpx;
    border-radius: 16rpx;
    text-align: center;
    .rowBtn {
      display: inline-block;
      width: 262rpx;
      height: 60rpx;
      line-height: 60rpx;
      margin: 24rpx;
      background: #fff;
      opacity: 1;
      border-radius: 16rpx;
      color: #fff;
      font-size: 48rpx;
      font-weight: bold;
    }
    .h {
      color: #f25559;
    }
    .m {
      color: #ffbe00;
    }
    .l {
      color: #34c759;
    }
  }
}
</style>
